<template>
<!-- 登录页面 -->
  <div class="login-container">
    <!-- 表单版心 -->
    <div class="login-form-wrap">
      <!-- logo区域 -->
      <div class="login-head">
        <div class="logo"></div>
      </div>
      <!-- 表单区域 -->
      <el-form ref="form" :model="form" class="login-form" :rules="rules">
        <el-form-item prop='mobile'>
          <el-input v-model="form.mobile" ></el-input>
        </el-form-item>
        <el-form-item prop='code'>
          <el-input v-model="form.code" ></el-input>
        </el-form-item>
        <el-form-item prop='isAgree'>
            <el-checkbox label="我已阅读并同意用户协议和隐私条款" name="type" v-model="form.isAgree" ></el-checkbox>
        </el-form-item>
        <el-form-item>
          <!-- 注:prevent阻止表单默认提交行为 ; handleLogin代表用户直接触发事件 ; 使用组价loading加载状态-->
          <el-button type="primary" @click.prevent="hLogin" class="login-btn" :loading="isLoading">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        mobile: '13911111111',
        code: '246810',
        isAgree: true
      },
      // 是否在 登陆
      isLoading: false,
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请输入合法的手机号', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入六位数字密码', trigger: 'blur' }
        ],
        // 自定义验证是否勾选单选框
        isAgree: [
          {
            validator: function (rule, value, callback) {
              if (value) { // 选中
                callback()
              } else { // 未选中
                callback(new Error('请仔细阅读并勾选'))
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    hLogin () {
      // 登录调用验证
      // validate是ele-ui form的方法, validate(回调函数(两个参数){})-参数:校验成功和未通过校验的字段
      this.$refs.form.validate((valid) => {
        // 验证通过
        if (valid) {
          this.doLogin()
        }
      })
    },
    // ********* async await 解决异步问题 *********
    async doLogin () {
      // 加载中 - 发送登录请求时禁用登录按钮,接收后台返回数据后才可用
      this.isLoading = true

      // 获取表单数据 - 解构赋值
      const { mobile, code } = this.form
      // try里放可能出错的代码, 有错误会抛出给catch收集
      try {
        const res = await this.$axios({
          method: 'POST',
          url: '/mp/v1_0/authorizations',
          data: {
            mobile,
            code
          }
        })
        // 发送完请求恢复登陆按钮
        this.isLoading = false
        // -----请求成功时-----
        // 消息提示-使用elementUi组件
        this.$message({
          message: '登陆成功',
          type: 'success'
        })
        // 把token保存到本地
        localStorage.setItem('tokenStr', res.data.data.token)
        // 跳转到layout首页
        this.$router.push('/')
      } catch (err) {
      // 发送完请求恢复登陆按钮
        this.isLoading = false
        // -----请求失败时-----
        console.log(err)
        this.$message({
          message: '登陆失败',
          type: 'warning'
        })
      }
    }
    // *********** Promise 解决异步问题 ***********
    // doLogin () {
    //   // 加载中 - 发送登录请求时禁用登录按钮,接收后台返回数据后才可用
    //   this.isLoading = true

    //   // 获取表单数据 - 解构赋值
    //   const { mobile, code } = this.form

  //   // axios发送请求
  //   this.$axios({
  //     method: 'POST',
  //     url: '/mp/v1_0/authorizations',
  //     data: {
  //       mobile,
  //       code
  //     }
  //   }).then(res => {
  //     // 恢复登录按钮
  //     this.isLoading = false
  //     console.log(res)
  //     // 消息提示-使用elementUi组件
  //     this.$message({
  //       message: '登陆成功',
  //       type: 'success'
  //     })
  //     // 把token保存到本地
  //     localStorage.setItem('tokenStr', res.data.data.token)
  //     // 跳转到layout首页
  //     this.$router.push('/')
  //   }).catch(err => {
  //     // 恢复登录按钮
  //     this.isLoading = false
  //     console.log(err)
  //     this.$message({
  //       message: '登陆失败',
  //       type: 'warning'
  //     })
  //   })
  // }
  }
}
</script>

<style scoped lang="less">
// 铺满整屏
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  background: url("../../assets/login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form-wrap {
    min-width: 300px;
    padding: 30px 50px 10px;
    background-color: #fff;
    .login-head {
      display: flex;
      justify-content: center;
      .logo {
        width: 200px;
        height: 57px;
        background: url("../../assets/logo_index.png") no-repeat;
        background-size: contain;
      }
    }
    .login-form {
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
